<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子组件向父组件通信emit</title>
    <!-- 引入Vue.js库 -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- Vue实例挂载的根元素 -->
    <div id="app">
        <!-- 显示总数 -->
        <h2>总数：{{total}}</h2>
        <!-- 使用自定义组件my-btn，并监听其increase和reduce事件 -->
        <my-btn @increase="getTotal" @reduce="getTotal"></my-btn>
    </div>

    <!-- 定义my-btn组件的模板 -->
    <template id="temp">
        <div>
            <!-- 点击按钮时调用add方法 -->
            <button @click="add()">单击+1</button>
            <!-- 点击按钮时调用red方法 -->
            <button @click="red()">单击-1</button>
        </div>
    </template>

    <script type="text/javascript">
        // 注册名为my-btn的Vue组件
        Vue.component('my-btn', {
            // 使用id为temp的模板
            template: '#temp',
            // 组件的数据函数，返回一个对象，包含counter属性
            data: function () {
                return {
                    counter: 0
                }
            },
            // 组件的方法
            methods: {
                // add方法，点击+1按钮时调用
                add: function () {
                    // 增加counter的值
                    this.counter++;
                    // 向父组件触发increase事件，并传递counter的值
                    this.$emit('increase', this.counter);
                },
                // red方法，点击-1按钮时调用
                red: function () {
                    // 减少counter的值
                    this.counter--;
                    // 向父组件触发reduce事件，并传递counter的值
                    this.$emit('reduce', this.counter);
                }
            },
        });

        // 创建Vue实例
        var vm = new Vue({
            // 挂载到id为app的元素
            el: '#app',
            // 实例的数据对象，包含total属性
            data: {
                total: 0
            },
            // 实例的方法
            methods: {
                // getTotal方法，接收参数total并更新实例的total属性
                getTotal(total) {
                    this.total = total;
                }
            }
        });
    </script>
</body>
</html>